<script lang="ts" setup>
import {useRouter,useRoute} from "vue-router"
import {ref} from "vue"
import {getAceDetail} from "../serve.ts";

const
    route = useRoute(),
    router = useRouter(),
    count = ref(1),
    num = ref(1),
    item = ref({}),
    load = ref(true)
;
function get() {
  getAceDetail(route.query['id']).then(r=>{
    r['imageInput'] = JSON.parse(r['imageInput'])
    item.value = r
    load.value = false
  })
}
get()
</script>

<template>
  <el-scrollbar v-loading="load" element-loading-text="加载中...">
    <div style="width: 100%;height: 5px;background-color: #F5F5F5;"/>
    <img alt="" rt src="/left-arrow.svg" @click="router.back()">
    <h1 style="text-align: center;">{{ item['title'] }}</h1>
    <div style="padding: 25px 50px 50px 50px;">
      <h4>{{item['synopsis']}}</h4>
      <div scig>
        <img ig :src="item['imageInput']" alt="">
      </div>
      <div v-html="item['content']"/>
    </div>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[rt] {
  cursor: pointer;
  width: 30px;
  margin-left: 50px;
  margin-top: 10px;
}
[scig]{
  text-align: center;
  margin: 20px 0;
  [ig]{
    width: 300px;
    height: 380px;
    border-radius: 10px;
  }
}
</style>